<template>
  <div class="dialog">
    <div class="dialog-wrapper">
      <div class="dialog-header">
        <span class="dialog-header-title">提示</span>
      </div>

      <div class="dialog-content" v-if="msg !== 'upload'">
        <!-- 这里的文本内容 一开始写页面是写死的 但是为了后期复用方便 改为app.vue中的dialog组件传过来 -->
        <!-- 清空后，无法恢复，确认清空吗？ -->
        {{msg}}
      </div>

      <div v-else class="dialog-content">
          <input type="file" accept="*.txt" @change="upload">
          <p>只允许上传由侧边栏下载的notepad.txt文件</p>
          <p v-if="up_suc">数据读取成功，是否确定导入？</p>
          <p v-if="up_err">上传失败，只允许notepad.txt文件</p>
      </div>

      <div class="dialog-btns">
        <button class="cancel-btn" @click="cancelEvent">取消</button>
        <button v-if="msg !== 'upload'" class="sure-btn" @click="sureEvent">确定</button>
        <button v-else class="sure-btn" @click="sureUpload">确定</button>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      up_suc: false,
      up_err: false,
      events: ''
    }
  },
  props: ['msg'],
  methods: {
    cancelEvent() {
      this.$emit('cancel')
    },
    sureEvent() {
      this.$emit('sure')
    },

    // 选择文件 上传事件
    upload(event) {
      const that = this,
            files = event.target.files,
            reader = new FileReader();
      console.log(files)
      if(files[0] && files[0].name.indexOf('notepad') !== -1) {
        // 当读取文件时，我们需要 onload 事件来访问数据
        reader.onload = function(e) {
          that.up_suc = true
          that.up_err = false
          that.events = e.target.result
        }
        reader.readAsText(files[0])
      }else {
        that.up_suc = false
        that.up_err = true
      }
    },

    // 确定上传 点击确定上传数据 弹窗消失this.cancelEvent
    sureUpload() {
      if(this.up_suc) {
        this.$store.dispatch('uploadevent', this.events)
        this.cancelEvent()
      }
    }
  }
}
</script>

<style lang="scss" scoped>
// .dialog做遮罩 .dialog-wrapper 中间的弹窗主体
.dialog {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.4);
  overflow: hidden;
  z-index: 999;

  .dialog-wrapper {
    display: flex;
    flex-direction: column;
    position: absolute;
    top: 20%;
    left: 50%;
    transform: translateX(-50%);
    background: #fff;
    width: 100%;
    padding: 1em;
    max-width: 400px;
    border-radius: 2px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, .3);
    // 动画
    animation: dialog .5s;

    .dialog-header-title {
      font-size: 1em;
      font-weight: 400;
    }

    .dialog-content {
      padding: 2em 2em;
      text-align: center;
      font-size: 1.1em;
      color: #475669;

      p {
        font-size: 0.6em;
      }
    }

    .dialog-btns {
      margin-left: auto;
      
      button {
        border-radius: .3em;
        border: 1px solid #aaa;
        padding: .5em;
        background: #fff;
        font-size: 1em;
      }

      .cancel-btn {
        color: #475669;
      }

      .sure-btn {
        color: #fff;
      }
    }

  }
}

@keyframes dialog {
  from{
      top: 15%;
  }
}

</style>